<template>
<div>
    <Collapse :value="data.length===1 ? '0': ''">
      <Panel :name="`${i}`"  v-for="(item, i) in data" :key="i">
         <div :gutter="2" style="display:inline-flex;align-items: center">
          <span>{{actionObj[data[i][0]] || data[i][0]}}</span>
          <Button class="ivu-ml" size="small" @click="delOption(i)">-</Button>
        </div>
        <div slot="content">
            <!-- <part-service :category="category" :currentEventIndex="i" @updateEvent="syncGroup"></part-service> -->
            <part-service :data="data[i][1]" 
                :actionCascaderData="actionCascaderData" :eventMap="eventMap"
                @updateEvent="syncGroup" />
        </div>
      </Panel>
      <Panel name="newOption">
        <div :gutter="2" style="display:inline-flex;align-items: center">
          <!-- <Input v-model="newOptionName"></Input> -->
          <Select v-model="newOptionName" transfer style="width:200px;" clearable>
            <Option v-for="(item,i) in listeners" :key="i" :label="item.label" :value="item.value"></Option>
          </Select>
          <Button class="ivu-ml" size="small" @click="addOption">+</Button>
        </div>
      </Panel>
    </Collapse>
<!-- <Button @click="test">test</Button> -->
</div>
</template>

<script>
    import storeVar from '../../../mixins/storeVar';
    import partService from './part-service';

    export default {
        mixins: [storeVar],
        components: { partService },
        props: {
            category: {
                default: () => {
                    return 'event';
                }
            }
        },
        data () {
            return {
                newOptionName: '',
                actionObj: {}, // action展示时，加上国际化配置的名称，方便查看；
                actionCascaderData: [],
                eventMap: {},
            }
        },
        created() {
            this.getActionCascader()
        },
        computed: {
            data() {
                return this.curProperty[this.category]
            },
            listeners() {
                let res = []
                let international = this.compGroup.currentClassObject.config.international
                let actionObj = {}

                this.compGroup.currentClassObject.listeners.forEach(item => {
                    let label = item
                    let newItem = item.replace(/^before/, '').toLocaleLowerCase()
                    if (/^(before)?[aA]ction\d/.test(item) && international && international[`fields.${newItem}`]) {
                        label = `${item}-` + international[`fields.${newItem}`]
                    }
                    actionObj[item] = label
                    res.push({
                        label,
                        value: item
                    })
                })
                this.$set(this, 'actionObj', actionObj)
                return res
            }
        },
        methods: {
            getActionCascader () {
                this.compGroup.getEventMap().then(res => {
                    this.actionCascaderData = res.recordsCascader;
                    this.eventMap = res.recordsMap
                })
            },
            addOption (i) {
                if (!!this.newOptionName && this.newOptionName !== '') {
                    this.data.push([
                        this.newOptionName,
                        { action: [], serviceParamList: [], backParamList: [], filter: [] }
                    ])
                    this.syncGroup()
                }
            },
            delOption (i) {
                this.data.splice(i, 1)
                this.syncGroup()
            },
            test() {
                console.log("file: event.vue:66 test", this.curProperty[this.category])
            }
        }
    }
</script>
<style scoped lang='scss'>

</style>
